<template>
	<uni-popup ref="popup" background-color="#fff" :safe-area="true">
		<view class="popup-content">
			<div class="popup-wrap">
				<ly-tree :tree-data="data" :props="defaultProps" node-key="id" show-checkbox
					:default-checked-keys="checkedKeys" :defaultExpandAll="true"
					:expand-on-check-node="expandOnCheckNode" @check="handleCheck" />
			</div>
			<view class="popup-btns">
				<button class="popup_button" @click="close">取消</button>
				<button type="primary" class="popup_button" @click="submit">确定</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import LyTree from '@/components/ly-tree/ly-tree.vue'
	import {
		getOrg,
		getUser
	} from '@/api/map/index.js'

	export default {
		name: "policeTree",
		components: {
			LyTree
		},
		data() {
			return {
				expandOnCheckNode: false,
				checkedKeys: [],
				deviceList: [],
				data: [],
				defaultProps: {
					children: 'children',
					label: 'label',
				},
			}
		},
		methods: {
			async initData() {
				const userRes = await getUser({
					currentPage: 1,
					pageSize: 9999,
					statuses: [0, 1]
				})
				const orgRes = await getOrg({})
				const user_list = userRes?.code === "00000000" && userRes?.data?.datas && userRes?.data?.datas.length >
					0 ? userRes?.data?.datas.map(({
						userId,
						orgId,
						...rest
					}) => ({
						orgId: userId,
						userId: userId,
						parentId: orgId,
						type: 'user',
						...rest
					})) : []
				const org_list = orgRes?.code === "00000000" && orgRes?.data && orgRes?.data.length > 0 ? orgRes?.data
					.map(({
						...rest
					}) => ({
						type: 'unit',
						...rest
					})) : []

				const list = user_list.concat(org_list)
				this.data = this.units_tree(list)
			},
			units_tree(data) {
				let map = {},
					result = []
				if (data && data.length > 0) {
					data.forEach(item => {
						map[item.orgId] = item
					})
					data.forEach(item => {
						let parent = map[item.parentId]
						if (parent) {
							parent.children = parent.children || []
							parent.children.push(item)
						} else {
							result.push(item)
						}
					})
				}
				return this.org_tree(result)
			},
			org_tree(list = []) {
				return list.map(item => {
					const {
						orgCname,
						orgId,
						userId,
						name,
						loginName,
						children,
						type,
						status
					} = item
					item.label = type === 'unit' ? orgCname : `${name}（${loginName}）`
					item.id = type === 'unit' ? orgId : userId
					if (type === 'unit') {
						item.checkable = children?.length > 0
					}
					if (children?.length > 0) item.children = this.org_tree(children)
					return item
				})
			},
			open() {
				this.$refs.popup.open('bottom')
				this.initData()
			},
			submit() {
				const id = this.deviceList.map(i => i.id)
				const labels = this.deviceList.map(i => i.label).join(',')
				this.$emit('onOk', id, labels)
				this.close()
			},
			close() {
				this.$refs.popup.close()
			},
			handleCheck(obj) {
				this.deviceList = obj.checkedNodes.filter(i => i.type == 'user')
			}
		}
	}
</script>

<style scoped>
	.popup-content {
		max-height: 85vh;
		padding-bottom: 200rpx;
		position: relative;
	}

	.popup-wrap {
		height: calc(85vh - 200rpx);
		overflow: auto;
	}

	.popup-btns {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 120rpx;
	}

	.popup_button {
		height: 60rpx;
		line-height: 60rpx;
		width: 200rpx;
		font-size: 32rpx;
	}
</style>